<template>
  <div id="app">
    <router-link to="/header">头</router-link>
    <router-link to="/menu">菜单</router-link>

    <br>
    <hr>
    <br>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menus: [
          {id: "1", menu: "第1个菜单"},
          {id: "2", menu: "第2个菜单"},
          {id: "3", menu: "第3个菜单"},
          {id: "4", menu: "第4个菜单"},
          {id: "5", menu: "第5个菜单"}
        ]
      }
    },

    methods: {
      run() {
        alert("父组件方法");
      },
      runChild(){
        this.$refs.child.runC()
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
</style>
